<template>
  <div class="guide-page" :class="{ guideActive: isGuide }">
    <!-- <van-image
      class="guide-image"
      :src="guideImg"
      v-if="isGuide"
      width="300"
      height="auto"
    ></van-image> -->
    <van-image :src="logo" width="120" height="120" class="logo"></van-image>
    <div class="title">优品用呗</div>
    <div v-if="deviceType == 'IOS'" class="ios">
      <div class="ios-tip">IOS签名版，正常使用需要操作如下:</div>
      <div class="ios-step">设置—通用—VPN与设备管理——点击信任</div>
    </div>
    <div class="btn">
      <van-button round block color="#E6232B" @click="onClickDownload">
        <div class="btn-content">
          <van-image :src="icon" width="28" height="28"></van-image>
          <span class="btn-content-text">{{ btnText }}</span>
        </div>
      </van-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed, onBeforeMount } from "vue";
import { mockApi, checkBrowser } from "@/utils/util";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import isoIcon from "@/assets/channel/ios-icon.png";
import androidIcon from "@/assets/channel/android-icon.png";
import logo from "@/assets/channel/logo.png";
import guideImg from "@/assets/channel/guide-top.png";

const props = defineProps({
  deviceType: {
    type: String,
    default: "Android",
  },
  download: {
    type: Boolean,
    default: false,
  },
});

const route = useRoute();

const { isDownload } = route.query;

const isGuide = computed(() => {
  // return checkBrowser() == "WeChat Browser";
  return checkBrowser() == "WeChat Browser";
});

const icon = computed(() => {
  return props.deviceType == "Android" ? androidIcon : isoIcon;
});

const btnText = computed(() => {
  return props.deviceType == "Android" ? "Android下载" : "iphone下载";
});

// const route = useRoute();
const router = useRouter();

const downloadApk = () => {
  if (props.deviceType == "IOS") {
    let downLoadUrl =
      "itms-services://?action=download-manifest&url=https://dch5.dev.qbclub.club/youpin.plist";
    window.location.href = downLoadUrl;
  } else if (props.deviceType == "Android") {
    let downLoadUrl = "https://dch5.dev.qbclub.club/download/app/youpin.apk";
    window.location.href = downLoadUrl;
  }
};

onBeforeMount(() => {
  // onMounted(() => {
  console.log("check--", checkBrowser());
  console.log("isGuide", isGuide.value);
  const browserType = checkBrowser();
  // let browserType = "WeChat Browser";
  console.log("WeChat Browser" != browserType);
  if (props.download) {
    downloadApk();
  }
  // if ("WeChat Browser" != browserType) {
  //   // console.log("--------");
  //   // router.push("/");
  // } else {
  //   router.push("/guideWechat");
  // }
});

const onClickDownload = () => {
  // 微信浏览器进入引导页面
  const browserType = checkBrowser();
  console.log(browserType);
  if (browserType == "WeChat Browser") {
    // 微信打开落地页跳转引导图
    // showToast("----");
    // router.push("/guideWechat");
    router.push({
      path: "/guideWechat",
      query: { isDownload: "1", deviceType: props.deviceType },
    });
  } else {
    downloadApk();
  }
};
</script>

<style lang="scss" scoped>
.guide-page {
  background-color: #f6f4f4;
  padding: 15px;
  width: 100%;
  min-height: 100vh;
  // background-size: cover;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("@/assets/channel/bg.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    margin-top: 360px;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px auto 40px;
  }
  .ios {
    text-align: center;
    line-height: 1.8;
    &-tip {
      color: #b7b7b7;
      font-size: 12px;
    }
    &-step {
      color: #e6232b;
      margin-bottom: 10px;
    }
  }
  .btn {
    width: 86%;
    // margin: 10px 40px;
    margin-bottom: 10px;
  }
  .btn-content {
    display: flex;
    align-items: center;
    &-text {
      margin-left: 10px;
    }
  }
}
.guideActive {
  position: relative;
  // background: ##7b7777;
}
.guide-image {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
